<template>
  <div class="dashboard-container">
    <div v-if="roleType === '1'" style="margin-top: 20px" class="dashboard-text">
      <!--数据统计块-->
      <div class="totalDivs">
        <div class="totalDiv" style="margin-left: 4px;background: linear-gradient(90deg,#eace4c,#58c446);">
          <div class="icon-container">
            <svg style="width: 60px;height: 60px;" t="1640102451738" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2108"><path d="M256 68.693333a160 160 0 0 1 48.768 7.616l277.333333 88.746667A160 160 0 0 1 693.333333 317.44v146.922667l87.125334-55.424a96 96 0 0 1 129.856 25.472l2.666666 3.968a96 96 0 0 1 15.018667 51.541333V896h21.333333a32 32 0 0 1 0 64h-874.666666a32 32 0 0 1 0-64h21.333333V228.693333a160 160 0 0 1 154.816-159.914666z m0 64a96 96 0 0 0-96 96V896h469.333333V317.44a96 96 0 0 0-62.378666-89.92l-4.373334-1.514667-277.333333-88.746666A96 96 0 0 0 256 132.693333z m602.986667 340.053334a32 32 0 0 0-44.16-9.813334L693.333333 540.224V896h170.666667V489.92a32 32 0 0 0-3.221333-14.016zM288 533.333333a32 32 0 0 1 32 32v106.666667a32 32 0 0 1-64 0v-106.666667a32 32 0 0 1 32-32z m0-256a32 32 0 0 1 32 32v106.666667a32 32 0 0 1-64 0v-106.666667a32 32 0 0 1 32-32z" fill="#8a8a8a" p-id="2109" /></svg>
            <span class="spanTitle">总幢数</span>
          </div>
          <span class="spanValue">{{ buildCount }}</span>
        </div>
        <div class="totalDiv" style="background: linear-gradient(90deg,#1cd8e1,#156ff0)">
          <div class="icon-container">
            <svg style="width: 60px;height: 60px;" t="1640103042084" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3269" width="200" height="200"><path d="M951.423543 491.107157l-429.971775-350.267479L91.495342 491.107157l-37.151132-40.86778 435.854762-355.046319c18.189268-14.833847 44.322461-14.833847 62.525032 0l434.141748 353.664855L951.423543 491.107157z" p-id="3270" fill="#8a8a8a" /><path d="M866.277304 928.923598l-689.636746 0c-19.527752 0-35.356252-15.829524-35.356252-35.356252L141.284305 406.77547c0-19.527752 15.827477-35.357276 35.356252-35.357276 19.529799 0 21.215184 1.685385 21.215184 21.214161l0 479.718783 647.208425 0L845.064166 406.77547c0-19.527752 1.670036-35.357276 21.213137-35.357276 19.514449 0 35.358299 15.8285 35.358299 35.357276l0 486.791875C901.635603 913.094074 885.7938 928.923598 866.277304 928.923598z" p-id="3271" fill="#8a8a8a" /><path d="M780.550851 158.394497 724.726427 158.394497c-3.687996 0-6.671956 5.870708-6.671956 13.121855l0 67.273173c0 3.949962 0.924045 7.67889 2.457981 10.178827l51.91437 83.22754c1.188058 1.905396 2.681062 2.940982 4.213975 2.940982l3.90596 0c3.689019 0 6.658653-5.881964 6.658653-13.118785L787.205411 171.515329C787.209504 164.264181 784.239869 158.394497 780.550851 158.394497z" p-id="3272" fill="#8a8a8a" /><path d="M645.187907 743.54861l-64.99427 0L580.193637 616.19406c0-34.169217-12.44545-51.27992-37.332257-51.27992-11.585873 0-21.201881 5.192256-28.864398 15.564487-7.667633 10.346649-11.505032 23.010063-11.505032 37.926798l0 125.144208L437.494611 743.549633 437.494611 614.564957c0-33.106002-12.305257-49.65184-36.945447-49.65184-12.237719 0-22.016433 4.958942-29.349445 14.849196-7.347339 9.902534-11.007705 22.980387-11.007705 39.248909l0 124.536364-65.189721 0L295.002292 520.329712l65.189721 0 0 34.902928 0.814552 0c7.789407-12.775978 18.161638-22.707165 31.090089-29.779234 12.897751-7.045463 26.490328-10.578939 40.769542-10.578939 31.339776 0 52.800553 14.057157 64.388473 42.178635 17.223267-28.119431 42.249243-42.178635 75.063603-42.178635 48.587602 0 72.868611 29.996175 72.868611 90.004897L645.187907 743.54861 645.187907 743.54861z" p-id="3273" fill="#8a8a8a" /><path d="M768.38374 585.271794l-96.499821 0 0-24.26873 42.512233-40.797172c8.947789-8.53642 15.176654-15.702634 18.739806-21.48943 3.578502-5.799076 5.346775-11.835559 5.346775-18.078751 0-14.07353-7.55507-21.11797-22.636556-21.11797-12.67774 0-24.943089 5.109368-36.790928 15.287171L679.055249 447.379237c12.69002-8.411577 27.069519-12.609179 43.186591-12.609179 14.585183 0 26.158776 3.714602 34.694173 11.146874 8.519024 7.4159 12.802584 17.691941 12.802584 30.812773 0 17.331737-10.523681 35.479049-31.531134 54.484915l-30.869055 27.800159 0 0.568958 61.046355 0L768.38374 585.271794 768.38374 585.271794z" p-id="3274" fill="#8a8a8a" /></svg>
            <span class="spanTitle">总占地面积</span>
          </div>
          <span class="spanValue">{{ areaCount }}</span>
        </div>
        <div class="totalDiv" style="background: linear-gradient(90deg,#f694db,#ff5dcf)">
          <div class="icon-container">
            <svg style="width: 60px;height: 60px;" t="1640103169879" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5360" width="200" height="200"><path d="M703.400215 995.074204c-3.51915 0-7.078209-0.991584-10.240225-3.066849-30.28884-19.875676-80.136132-25.263383-97.079012-25.678846l-22.119787 0-35.287691 0.271176c-0.048095 0-0.095167 0-0.143263 0L92.740194 966.599685c-10.326183 0-18.696828-8.370645-18.696828-18.696828l0-22.467711c-0.318248-6.266727-0.910743-40.603767 21.004383-78.307484 13.716396-23.598464 33.431414-43.86095 58.598606-60.225663 30.493501-19.828604 69.116147-33.909297 114.796536-41.84913 0.233314-0.039909 0.466628-0.075725 0.700965-0.107447 0.346901-0.047072 35.499515-4.858658 71.208808-14.273075 61.894675-16.317641 67.307965-30.743188 67.345828-30.884404 0.364297-1.430582 0.89437-2.803859 1.572822-4.095271 0.50756-2.699482 1.76418-12.858866-0.63752-40.079834-6.100952-69.136613-42.120306-109.995183-71.061452-142.825916-9.127891-10.354835-17.749246-20.133549-24.387433-29.722952-28.640294-41.37227-31.296797-88.416725-31.396057-90.39887-0.01535-0.311085-0.022513-0.62217-0.022513-0.933255 0-18.779715 9.363252-27.418466 17.624403-35.041074l0.433882-0.401136c0.271176-0.25071 0.442068-0.436952 0.542352-0.556679 0.093121-1.340531-0.566912-4.743024-1.013073-7.04137-0.169869-0.873903-0.339738-1.750877-0.50142-2.632967-7.179516-38.981826-7.670703-99.19214-1.175779-137.837298 2.409886-50.813293 46.224788-89.711208 48.105624-91.356684 0.071631-0.062422 0.143263-0.12382 0.214894-0.185218 6.290263-5.338588 12.671601-11.169387 16.727986-17.636682 0.487094-0.775666 0.827855-1.37737 1.066285-1.836835-0.304945-0.786922-0.741897-1.793856-1.094938-2.608407-2.436492-5.618974-6.118348-14.109346-4.02364-25.02393 1.263783-6.589069 6.078439-18.362206 24.118304-23.173792 7.261381-1.937119 15.022135-2.333138 20.689205-2.62171l1.122567-0.058328c22.38994-1.178849 46.272883-2.176572 70.435189-0.324388 174.730557 13.396101 234.920404 78.686107 237.396805 81.459267 0.140193 0.155543 0.276293 0.314155 0.409322 0.474814 13.986549 16.756639 24.347524 37.635155 30.7964 62.055334 2.01489 7.619538 3.309372 14.016225 4.062526 20.072151 6.102998 35.464723 5.084808 71.904657 3.78214 96.269577-0.732687 13.675464-2.257413 28.030403-4.800329 45.175899-0.691755 4.656043 0.068562 5.564739 0.355087 5.906523 0.75827 0.906649 1.686409 1.892093 2.667759 2.934842 3.862981 4.099365 9.152451 9.713222 11.964496 18.721387 1.410116 4.502547 2.069125 9.360182 2.069125 15.267728 0 0.311085-0.008186 0.62217-0.022513 0.933255-0.099261 1.982144-2.755764 49.0266-31.395034 90.397846-6.639211 9.590426-15.259542 19.36914-24.387433 29.722952-28.942169 32.829709-64.960501 73.689303-71.061452 142.827963-2.4017 27.220968-1.14508 37.379329-0.63752 40.079834 0.678452 1.291412 1.208525 2.664689 1.572822 4.094248 0.036839 0.141216 5.471618 14.613836 67.648726 30.964222 35.7052 9.388834 70.557986 14.146185 70.90591 14.193257 0.303922 0.040932 0.606821 0.090051 0.908696 0.145309 46.095851 8.549723 84.956927 22.991644 115.505687 42.923602 25.252127 16.476253 44.930305 36.7019 58.489112 60.114123 21.50171 37.128619 20.626783 70.714552 20.195971 77.443813l0 22.332634c0 10.326183-8.370645 18.696828-18.696828 18.696828L775.884063 966.602755c-10.326183 0-18.696828-8.370645-18.696828-18.696828s8.370645-18.696828 18.696828-18.696828l158.188812 0L934.072875 924.897911c0-0.686638 0.00921-1.106194 0.081864-1.769296 0.104377-1.508353 1.627057-28.332279-16.349363-58.130955-10.82044-17.937534-26.589588-33.609469-46.870494-46.580898-26.100448-16.693194-59.762105-28.967752-100.05274-36.482913-4.63967-0.642636-39.012526-5.564739-75.080999-15.059997-70.761624-18.629289-87.964424-39.353286-93.189426-54.395888-4.004197-7.765871-6.245238-23.195282-2.984984-60.153008 7.18054-81.369216 49.41955-129.282458 80.260975-164.268274 8.747221-9.921977 16.301268-18.491143 21.693068-26.279526 21.120017-30.510898 24.437575-66.300009 24.765033-70.606081-0.032746-2.252297-0.260943-3.223415-0.36225-3.549849-0.248663-0.798179-1.89721-2.547009-3.490497-4.238534-1.25048-1.327228-2.667759-2.832512-4.136204-4.587482-7.950066-9.504468-10.782577-21.079084-8.66024-35.384905 2.367931-15.960507 3.781116-29.206182 4.449335-41.684378 1.951445-36.502355 0.913812-63.747883-3.363607-88.341001-0.057305-0.326435-0.105401-0.654916-0.145309-0.983397-0.531096-4.438079-1.530866-9.354042-3.14769-15.46932-4.986571-18.884093-12.726859-34.770921-23.006993-47.232744-1.714038-1.747807-15.385409-15.125489-45.883003-29.67588-54.882981-26.183336-120.791064-35.849486-166.417217-39.34817-21.934568-1.681292-44.442188-0.732687-65.614393 0.382717l-1.178849 0.060375c-1.766226 0.090051-4.735861 0.2415-7.55814 0.525979 2.447748 5.841032 5.453199 14.632255 2.296299 25.136493-1.184989 3.939729-3.003404 7.792477-5.723352 12.129248-6.732331 10.733459-15.923668 19.23611-24.054859 26.145473-1.597381 1.441838-34.223452 31.356149-35.351136 65.738213-0.028653 0.86981-0.11768 1.736551-0.267083 2.594081-5.972015 34.304294-5.568832 90.780563 0.898463 125.894292 0.140193 0.765433 0.288572 1.52575 0.435928 2.282996 1.980097 10.205433 5.294586 27.284413-10.879792 42.202171l-0.434905 0.402159c-2.086521 1.924839-4.943592 4.560876-5.41636 5.468548l0 0c0.00307 0-0.13303 0.426719-0.164752 1.584078 0.328481 4.295839 3.654226 40.060391 24.76401 70.554916 5.3918 7.788383 12.945847 16.356526 21.693068 26.279526 30.841426 34.984792 73.079412 82.899058 80.259952 164.266227 3.260254 36.95875 1.019213 52.388161-2.984984 60.154032-5.226025 15.042601-22.427802 35.766598-93.189426 54.395888-36.365232 9.574053-71.006194 14.497179-75.18947 15.074324-39.83424 6.958482-73.196069 18.883069-99.160417 35.44528-20.185738 12.876262-35.971259 28.599362-46.919613 46.732347-18.282389 30.281677-17.133216 57.860802-17.055444 59.33641 0.050142 0.543376 0.054235 0.867764 0.054235 1.433652l0 4.309142 427.01135 0 35.287691-0.271176c0.047072 0 0.095167 0 0.143263 0l22.423709 0c0.141216 0 0.280386 0.001023 0.421602 0.005117 2.895957 0.064468 71.446215 1.943258 116.949572 31.803333 8.633634 5.665023 11.039427 17.254989 5.374404 25.888624C715.458855 992.104569 709.488887 995.074204 703.400215 995.074204zM631.466905 689.8762c0.454348 0.36839 0.890276 0.757247 1.305739 1.164522C632.378671 690.653913 631.943766 690.26301 631.466905 689.8762zM414.041968 689.8762c-0.471744 0.382717-0.901533 0.768503-1.292436 1.152243C413.160901 690.626283 413.592736 690.24152 414.041968 689.8762z" p-id="5361" fill="#8a8a8a" /></svg>
            <span class="spanTitle">总住户</span>
          </div>
          <span class="spanValue">{{ userCount }}</span>
        </div>
        <div class="totalDiv" style="background: linear-gradient(90deg,#ffab57,#ff5f77)">
          <div class="icon-container">
            <svg style="width: 60px;height: 60px;" t="1640103330683" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2186" width="200" height="200"><path d="M350.176 288c19.136-64.8 46.368-117.312 78.56-150.944A384.256 384.256 0 0 0 200.064 288h150.112z m33.472 0h256.704C610.016 190.72 561.6 128 512 128c-49.6 0-98.016 62.72-128.32 160z m290.176 0h150.08a384.256 384.256 0 0 0-228.64-150.944C627.456 170.656 654.72 223.2 673.824 288z m8.544 32c11.68 48.512 19.072 102.624 21.088 160h191.232c-4.8-57.92-22.4-112.224-50.048-160h-162.24z m-33.024 0h-274.688a774.816 774.816 0 0 0-22.08 160h318.848a774.816 774.816 0 0 0-22.08-160z m-307.712 0h-162.24a381.632 381.632 0 0 0-50.08 160h191.232c2.016-57.376 9.408-111.488 21.088-160zM704 512c0 56.704-5.248 110.72-14.72 160h171.904A382.592 382.592 0 0 0 896 512h-192z m-32 0H352c0 57.28 5.6 111.456 15.392 160h289.216c9.792-48.544 15.392-102.72 15.392-160z m-352 0H128c0 57.088 12.48 111.296 34.816 160h171.904a851.296 851.296 0 0 1-14.72-160z m362.368 192c-19.104 79.488-49.76 143.936-87.104 182.944A384.608 384.608 0 0 0 844.64 704h-162.24z m-33.024 0h-274.688c29.12 115.296 82.496 192 137.344 192s108.224-76.704 137.344-192z m-307.712 0h-162.24a384.608 384.608 0 0 0 249.344 182.944c-37.344-39.008-68-103.456-87.104-182.944zM161.408 288A415.68 415.68 0 0 1 512 96a415.68 415.68 0 0 1 350.592 192H864v2.208A413.536 413.536 0 0 1 926.784 480H928v32c0 229.76-186.24 416-416 416S96 741.76 96 512v-32h1.216C102.496 410.56 124.8 345.92 160 290.208V288h1.408z" p-id="2187" fill="#8a8a8a" /></svg>
            <span class="spanTitle">访问量</span>
          </div>
          <span class="spanValue">{{ visitCount }}</span>
        </div>
      </div>
      <!--Echarts图表-->
      <div class="echarts">
        <div id="zhuzhuang" class="dashboard-tubiao" />
        <div id="bingzhuang" class="dashboard-tubiao" style="margin-left: 18px" />
      </div>

    </div>
    <div v-if="roleType === '2' || roleType === '3'" style="margin: 30px auto;width: 90%">

      <!--轮播图区 start-->
      <div>
        <el-carousel indicator-position="outside" height="550px">
          <el-carousel-item v-for="item in lunbo" :key="item">
            <img width="100%" height="100%" :src="item">
          </el-carousel-item>
        </el-carousel>
      </div>
      <!--轮播图区 end-->

      <!--新闻卡片区 start-->
      <div style="margin-top: 10px;display: flex;justify-content: space-between;">
        <div style="width: 49%">
          <el-card class="box-card" shadow="hover" :body-style="{background: 'white'}">
            <div slot="header">
              <span style="color: black;font-weight: bolder">热门新闻</span>
            </div>
            <div v-for="o in newList" :key="o.id" style="text-align: center" class="text item">
              <a @click="gotoDetail(o.id)">{{ o.title }}</a>
              <div class="not_has_more" />
            </div>
          </el-card>
        </div>

        <div style="width: 49%">
          <el-card class="box-card" shadow="hover" :body-style="{background: 'white'}">
            <div slot="header" class="clearfix">
              <span style="color: black;font-weight: bolder">热门资讯</span>
            </div>
            <div v-for="o in zixunList" :key="o.id" style="text-align: center" class="text item">
              <a @click="gotoDetail(o.id)">{{ o.title }}</a>
              <div class="not_has_more" />
            </div>
          </el-card>
        </div>
      </div>
      <!--新闻卡片区 start-->
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
// eslint-disable-next-line no-unused-vars
import * as echarts from 'echarts'
import { getHomePageData, getNews, getNotices, getRate, getRateCount } from '@/api/home'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {
    this.roleType = localStorage.getItem('roleType')
    if (this.roleType === '2' || this.roleType === '3') {
      this.getNewsListPage()
      this.getZixunListPage()
    }
    this.getRateDetail()
    this.getBingzhuangData()
    this.getNotice()
    this.getPageData()
  },
  data() {
    return {
      buildCount: null,
      areaCount: null,
      userCount: null,
      visitCount: null,
      roleType: '',
      lunbo: ['https://lld66.obs.cn-east-2.myhuaweicloud.com/2022/04/04/150271a24cdc93d657402beafa2ddd06.jpeg',
        'https://lld66.obs.cn-east-2.myhuaweicloud.com/2022/02/20/lunbo2.jpeg'
      ],
      newList: [],
      zixunList: [],
      notices: [],
      monthList: [],
      rateList: [],
      rateCountList: []
    }
  },
  mounted() {

  },
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例
      const zhuzhuangChart = echarts.init(document.getElementById('zhuzhuang'))
      // 初始化饼状图
      const bingzhuangChart = echarts.init(document.getElementById('bingzhuang'))
      // 指定图表的配置项和数据
      const zhuzhuangOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            // dataView: { show: true, readOnly: false }
            magicType: { show: true, type: ['line', 'bar'] }
            // restore: { show: true }
            // saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['投诉数量']
        },
        xAxis: [
          {
            type: 'category',
            data: this.monthList,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [

          {
            type: 'value',
            name: '柱状',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '投诉数量',
            type: 'bar',
            data: this.rateList
          }
        ]
      }
      const bingzhuangOption = {
        title: {
          text: '评价饼状图',
          subtext: '居民评价',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: this.rateCountList,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      zhuzhuangOption && zhuzhuangChart.setOption(zhuzhuangOption)
      bingzhuangOption && bingzhuangChart.setOption(bingzhuangOption)
    },
    getNewsListPage() {
      getNews({
        pageNumber: 1,
        pageSize: 4,
        type: 1
      }).then(res => {
        console.log(res.data.records)
        this.newList = res.data.records
      })
    },
    getZixunListPage() {
      getNews({
        pageNumber: 1,
        pageSize: 4,
        type: 2
      }).then(res => {
        this.zixunList = res.data.records
      })
    },
    getBingzhuangData() {
      getRateCount().then(res => {
        this.rateCountList = res.data
        this.drawChart()
      })
    },
    getNotice() {
      getNotices().then(res => {
        this.notices = res.data
        console.log(res.data)
      })
    },
    gotoDetail(id) {
      this.$router.push({
        path: '/newList/newsDetails',
        query: {
          id: id
        }
      })
    },
    getRateDetail() {
      getRate().then(res => {
        this.rateList = res.data.rate
        this.monthList = res.data.montList
        this.drawChart()
      })
    },
    getPageData() {
      getHomePageData().then(res => {
        this.buildCount = res.data.buildCount
        this.areaCount = res.data.areaSum
        this.userCount = res.data.userCount
        this.visitCount = res.data.visitCount
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.dashboard {
  &-container {
    //margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
    .echarts{
      width: 100%;
      display: flex;
      margin-top: 40px;
      align-items: center;
      .dashboard-tubiao {
        width: 50%;
        height:400px;
        background-color: white;
        padding: 20px;
      }
    }
    .totalDivs{
      display: flex;
      width: 100%;
      color: #5a5e66;
      .totalDiv{
        display: flex;
        padding-left: 20px;
        margin-left: 10px;
        background-color: white;
        width: 33%;
        height: 150px;
        border-radius: 10px;
        .icon-container {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }
        .spanTitle{
          font-size: 23px;
          margin-left: 10px;
        }
        .spanValue{
          margin: 0 auto;
          line-height: 150px;
          font-size: 40px;
          font-weight: 600;
        }
      }
    }
  }
}

.not_has_more {
  text-align: center;
  position: relative;
  font-size: 20px;
  font-family: PingFangSC-Regular, PingFang SC;
  color: rgba(140, 142, 165, 1);
  &::after,
  &::before {
    position: absolute;
    width: 500px;
    height: 0.5px;
    background: #dadada;
    content: '';
  }
  &::after {
    left: 2%;
  }
  &::before {
    right: 2%;
  }
}
</style>
